<template>
<div>
    <el-row :gutter="20">
        <el-col :span="6"> 
            <Default name='总销售额'>
                <template slot="center">
                    <span style=';line-height:100px;font-size:15px'>
                        同周比 18.88%
                        <!-- {{test}}  -->
                        <svg style="width:10px;height:10px;">
                            <polygon points="0 10,5 0,10 10 " style="stroke:red;fill:red" ></polygon>
                        </svg>
                        日同比 60.88%
                        <!-- {{test}} -->
                        <svg style="width:10px;height:10px;">
                            <polygon points="0 0,10 0,5 10" style="stroke:green;fill:green" ></polygon>
                        </svg>
                    </span>
                </template>
                <template slot="header">
                    ￥ 12205
                </template>
                <template slot="footer">
                    <span style="">日销售额度￥ 12423</span>
                </template>
            </Default>
        </el-col>
        <el-col :span="6"> 
            <Default name='访问量'>
                <template slot="center">
                    <div style="width:280px;height:100px" ref="main"></div>
                </template>
                <template slot="header">
                    88460
                </template>
                <template slot="footer">
                    <span style="">日访问量 1234</span>
                </template>
            </Default>
        </el-col>
        <el-col :span="6"> 
            <Default name='支付笔数'>
                <template slot="center">
                    <div style="width:280px;height:100px" ref="main1"></div>
                </template>
                <template slot="header">
                    ￥ 12205
                </template>
                <template slot="footer">
                    <span style="">日销售额度￥ 12423</span>
                </template>
            </Default>
        </el-col>
        <el-col :span="6"> 
            <Default name='运营活动效果'>
                <template slot="center">
                    <div style="width:280px;height:100px;padding-bottom:30px" ref="main2"></div>
                </template>
                <template slot="header">
                    78%
                </template>
                <template slot="footer">
                    <span style="">日销售额度￥ 12423</span>
                </template>
            </Default>
        </el-col>
    </el-row>
</div>
</template>

<script>

import Default from './Datial'
export default {
    name:'Card',
    data(){
        return{
            test:'测试'
        }
    },
    components:{
        Default
    },
    methods:{
        doTest(){
            const myChart = this.$echarts.init(this.$refs.main)
            myChart.setOption({
                xAxis: {
                    data: ['A', 'B', 'C', 'D', 'E'],
                    show :false
                },
                yAxis: {
                    show  :false
                },
                series: [
                {
                data: [10, 8, 60, 23, 19],
                type: 'line',
                smooth: true,
                symbol: "none",
                label: {show: false},
                areaStyle:{
                color:{
                    //线性渐变
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(148,0,211,0.6)', // 0% 处的颜色
                    }, {
                        offset: 0.6, color: 'rgba(148,0,211,0)', // 100% 处的颜色
                    }],
                    global: false, // 缺省为 false
                },
                },
                itemStyle : {  
                    normal : {  
                        lineStyle:{  
                            color:'#EE82EE'  
                        }  
                    }  
                }, 
                }
                ],
                grid:{
                    left:0,
                    right:20
                }
            })
        },
        doColumn(){
            const myChart = this.$echarts.init(this.$refs.main1)
            myChart.setOption(
                {
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            show:false
        },
        yAxis: {show:false},
        series: [
            {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
            }
        ],
        grid:{
            left:0,
            }
            }
        )
    },
        doLading(){
            let val=78
            this.$echarts.init(this.$refs.main2).setOption({
                grid                : {
                    left            : '5%',
                    top             : '0',
                    right           : '10%',
                    bottom          : '0',
                    containLabel    : true,
                    width           : '83%'
                },
                xAxis               : {
                    type            : 'value',
                    splitLine       : {show: false},
                    axisLabel       : {show: false},
                    axisTick        : {show: false},
                    axisLine        : {show: false},
                    min:0,
                    max:100
                },
                yAxis               : {
                    type            : 'category',
                    axisTick        : {show: false},
                    axisLine        : {show: false},
                    axisLabel       : {
                        color       : 'black',
                        fontSize    : 17
                    },
                },
                series              : [
                    {
                        type        : 'bar',
                        barWidth    : 18,
                        data        : [val],
                        showBackground:true,
                        backgroundStyle:{
                            color:'#eee'
                        },
                        label       : {
                            show        : true,
                            position    : 'right',
                            formatter   : '|',
                            color       : '#40E0D0',
                            fontSize    : 15
                        },
                        itemStyle       : {
                            color: new this.$echarts.graphic.LinearGradient(
                                1, 0, 0, 0,
                                [
                                    {offset: 0, color: '#A4DF4E'},                   //柱图渐变色
                                    // {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
                                    {offset: 1, color: '#5DC69D'},                   //柱图渐变色
                                ]
                            ),
                            barBorderRadius: 0,
                        },
                        zlevel  : 1
                    },
                ]
            }
            )
        }
    },
    mounted(){
        this.doTest()
        this.doColumn()
        this.doLading()
    }
}
</script>

<style scoped>

</style>